<template>
  <div>
    <div class="ad-part-banner">
      <a href="javascript:void(0)" @click="showAdImg(src)" v-for="src in ad_img">
        <img :src="src" height="50" width="260"/>
      </a>

    </div>

    <div class="ad-part-app">
      <a href="https://www.jianshu.com/apps" >
        <el-row>
          <el-col :span="8"><img :src="qrc_img" alt="" height="60" width="60"></el-col>
          <el-col :span="16">
            <div class="title">下载这个app <i class="el-icon-arrow-right"></i></div>
            <div class="desc">随时地发现新内容</div>
          </el-col>
        </el-row>
      </a>
    </div>
  </div>

</template>

<script>
  export default {
    name: "ADArea",
    data() {
      return {
        ad_img: [
          'https://murasakichigo.xyz/my-jianshu-simu/assets/img/AD/ad1.png',
          'https://murasakichigo.xyz/my-jianshu-simu/assets/img/AD/ad2.png',
          'https://murasakichigo.xyz/my-jianshu-simu/assets/img/AD/ad3.png',
          'https://murasakichigo.xyz/my-jianshu-simu/assets/img/AD/ad4.png',
        ],

        qrc_img: 'https://murasakichigo.xyz/my-jianshu-simu/assets/img/AD/qcr.png',
      }
    },
    methods: {
      showAdImg(src) {
        alert('将调至页面:'+src);
      }
    },
    created() {

    }

  }
</script>

<style scoped lang="less">
  .ad-part-banner{
    img {
      margin-top: 10px;
    }
    margin-bottom: 20px;
  }

  .ad-part-app {
    img {
      margin-left: -10px;
      opacity: 0.85;
    }

    .title {
      margin-top: 8px;
      font-size: 15px;
      color: #333;
    }
    .desc {
      margin-top: 4px;
      font-size: 13px;
      color: #999;

    }
  }

  .el-row {
    margin-left: 10px;
    border: #d7d7d7 1px solid;
    border-radius: 6px;
    padding: 10px 22px;
    width: 90%;
  }

</style>